<template>
<div id="postarticle">

  <NavBar>
      <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
    <div slot="center">发表文章</div>
    <div slot="right" @click="onSubmit">发布</div>
  </NavBar>
<!--          <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>-->

<van-cell-group class="title">
  <van-field v-model="value"  placeholder="(必填）这个帖子离火就差这个标题了~" />
  <van-field
  readonly
  clickable
  label="分类"
  :value2="value2"
  :placeholder=value2
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>
</van-cell-group>

<!--     <van-field v-model="content"  placeholder="来吧尽情发挥把~" />-->
   <textarea class="content" v-model="content" placeholder="来吧尽情发挥吧~"></textarea>
<div class="uploader">
  <van-uploader v-model="fileList" multiple :max-count="3" :after-read="afterRead" />

<!--     <span class="my-icon">&#xe77a;</span>-->


<!--<van-field-->
<!--  readonly-->
<!--  clickable-->
<!--  label="分类"-->
<!--  :value2="value2"-->
<!--  :placeholder=value2-->
<!--  @click="showPicker = true"-->
<!--/>-->
<!--<van-popup v-model="showPicker" round position="bottom">-->
<!--  <van-picker-->
<!--    show-toolbar-->
<!--    :columns="columns"-->
<!--    @cancel="showPicker = false"-->
<!--    @confirm="onConfirm"-->
<!--  />-->
<!--</van-popup>-->
</div>


<!--  <img :src="">-->
</div>

</template>

<script>

import NavBar from "@/components/common/NavBar/NavBar";
import Info from "@/views/profile/Info";
  // import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import {postarticle} from "@/network/Users/postarticle";
import {postorder} from "@/network/Users/post_orders";

export default {

name: "article_post",
  components:{Info, NavBar},
  data(){
  return{
    value2: '',
    showPicker: false,
    content:'',
    value:'',
    fileList:[

    ],
    pic1:'',
    pic2:'',
    pic3:'',
    columns: ['神兵利器', '技术讨论', '羽球动态', '反馈建议', '俱乐部交流', '社区事务', '运动保健', '交友约球'],
    index:0
  }
  },
  methods:{
    onConfirm(value,index) {
      this.value2 = value;
      this.showPicker = false;
      this.index=index
    },
  return_before(){
    history.go(-1)
  },
      afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);

    },
    onSubmit(){
    postarticle(this.value,this.index+1,this.content,this.pic1,this.pic2,this.pic3).then(
        res=>{
          console.log(res);
          if (res.code===0){
          this.$notify({
            message:'哈哈',
            type:"success"
          })
          this.$router.push('/home')
          }
        }
    )
    },
    picture_deal(){

      if(this.fileList[0]){
        this.pic1=this.fileList[0].content
      }
      else {
        this.pic1=''
      }
      if(this.fileList[1]){
        this.pic2=this.fileList[1].content
      }
      else {
        this.pic2=''
      }
      if(this.fileList[2]){
        this.pic3=this.fileList[2].content
      }
      else {
        this.pic3=''
      }
    },

  },
  watch:{
  fileList(){
   this.picture_deal()
  }
  },
created() {
  this.$emit('header',false)
}
}
</script>

<style scoped>
#postarticle{

  height: 1000px;
}
.content{
border: 0;
  padding: 10px;

  width: 362px;
  height: 222px;
}
.uploader{

}
.title{

}


/deep/ .van-uploader__upload{
  width: 100px;
  height: 100px;
}
.uploader{
  margin-left: 12px;
}
 textarea::placeholder {
        color: skyblue;
    }
 .my-icon {
  font-family: "my-icon" !important;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*color: wheat;*/
}
 .add-cat{
   margin-left: 10px;
 }
 .bottom_fen{
   margin-top: 20px;
   cursor: pointer;
 }
 .current_cat{
  margin-left: 226px;
 }
</style>